import type { AudDialogShowParams } from '@/pages/components/Aud/AudDialog';
import { Popup } from 'devextreme-react';
import React, { useCallback, useEffect, useMemo, useImperativeHandle, useRef } from 'react';
import { useState } from 'react';

export interface SizeProp {
    width?: number | string,
    height?: number | string,
}

const SavePopup = React.forwardRef((props: any, ref: any) => {
    const { width, height, whereFrom } = props

    const diaParams = useRef<AudDialogShowParams & any>();

    const [visible, setVisible] = useState<boolean>(false);
    const [size, setSize] = useState<SizeProp>({ width, height });

    // 自定义方法
    useImperativeHandle(ref, () => ({
        show: (params: AudDialogShowParams) => {
            diaParams.current = params;
            setVisible(true);
        },
        close: () => { setVisible(false) }
    }));

    return (
        <>
            <Popup
                ref={ref}
                visible={visible}
                animation={{ duration: 3 }}
                title={diaParams.current?.title}
                minWidth={450}
                minHeight={200}
                {...props}
                {...size}
                // dragOutsideBoundary={true}
                resizeEnabled={true}
                onHiding={() => setVisible(false)}
                toolbarItems={[
                    {
                        widget: 'dxButton',
                        toolbar: 'bottom',
                        location: 'after',
                        options: {
                            text: '取消',
                            onClick: () => {
                                setVisible(false);
                                diaParams.current?.cancelCallback();
                            }
                        },
                    },
                    {
                        widget: 'dxButton',
                        toolbar: 'bottom',
                        location: 'after',
                        options: {
                            text: '否',
                            onClick: () => {
                                setVisible(false);
                                diaParams.current?.noCallback();
                            }
                        },
                    },
                    {
                        widget: 'dxButton',
                        toolbar: 'bottom',
                        location: 'after',
                        options: {
                            text: '是',
                            type: "default",
                            onClick: () => {
                                setVisible(false);
                                diaParams.current?.okCallback();
                            }
                        },
                    },
                ]}
                onResizeEnd={(e) => {
                    setSize({ width: e.width, height: e.height });
                }}
                contentRender={() => (
                    <div >
                        <span>是否保存对【{whereFrom}分录】的更改？</span>
                    </div>
                )}
            />

        </>
    );
});


export default SavePopup;